<template>
	<view >
		<view class="head-box h-400">
			<u--image
				:showLoading="true" 
				:src="getImg('swiper-img')" 
				width="100%"
				height="400rpx"
			></u--image>
		</view>
		<view class="padlr24 pad-t20">
			<view class="product-info block-box bor-r16 pad20">
				<view class="price-txt">
					<text class="f-s32">¥</text>
					<text class="f-s48">1980</text>
					<text class="price-sale mar-l10 txt-del">¥2980</text>
				</view>
				<view class="product-tit mar-t10">
					瓷肌美白 通透亮肤 舒缓保湿美白淡斑组合套餐
				</view>
				<view class="salce-txt mar-t10">
					<text>已售188</text>
					<text class="mar-l10">库存812</text>
				</view>
			</view>
			<view class="block-box pad24 mar-t20 bor-r16">
				<view class="block-tit flex-a ju-bt">
					<view class="f-s28">
						查看可使用门店
					</view>
					<u--image
						:showLoading="true" 
						:src="getImg('arrow-right')" 
						width="16rpx"
						height="24rpx"
					></u--image>
				</view>
				<view class="stoer-tips mar-t8">
					购买后凭条码或代码到店使用
				</view>
			</view>
			<view class="block-box  pad24 mar-t20 bor-r16">
				
				<view class="block-tit f-s28">
					查看可使用门店
				</view>
				<view class="cell-box flex-a mar-t20">
					<view class="cell-label">
						服务功效
					</view>
					<view class="cell-val pad-l48">
						服务功效
					</view>
				</view>
				<view class="cell-box flex-a mar-t20">
					<view class="cell-label">
						适用范围
					</view>
					<view class="cell-val pad-l48">
						所有肤质
					</view>
				</view>
				<view class="cell-box flex mar-t20">
					<view class="cell-label">
						服务流程
					</view>
					<view class="cell-val pad-l48">
						<view class="">
							共5个步骤
						</view>
						<view class="cell-process">
							<view 
								class="process-li flex-a ju-bt mar-t18" 
								v-for="(itme, index) in 5" 
								:key="index"
							>
								<view class="process-name flex-a">
									<view class="process-sort bor_r50 flex-center">
										{{ index + 1 }}
									</view>
									<view class="mar-l6">
										卸妆洁面
									</view>
								</view>
								<view class="process-time">
									5分钟
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fot-box flex-a ju-bt padlr24 pad-t20 pad-b88">
			<view class="fot-info flex">
				<view class="info-service">
					<u--image
						:showLoading="true" 
						:src="getImg('service-icon')" 
						width="40rpx"
						height="40rpx"
					></u--image>
					<view class="mar-t2">客服</view>
				</view>
				<view class="info-service mar-l78" @click="$goRouter('/pages/my/pages/orderList')">
					<u--image
						:showLoading="true" 
						:src="getImg('order-icon')" 
						width="40rpx"
						height="40rpx"
					></u--image>
					<view class="mar-t2">订单</view>
				</view>
			</view>
			<view class="fot-btns flex">
				<view class="btns-btn flex-center">
					加入购物车
				</view>
				<view 
					class="btns-btn btns-btn2 mar-l20 flex-center"
					@click="$goRouter('/pages/subscribe/pages/appointmentTime')"
				>
					下一步
				</view>
			</view>
		</view>
	</view>
</template>

<script> // 上门服务详情
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.fot-box {
		.fot-btns {
			.btns-btn {
				width: 224rpx;
				height: 80rpx;
				border-radius: 200rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				border: 2rpx solid #FF7171;
				color: #FF7171;
			}
			.btns-btn2 {
				color: #FFFFFF;
				background: #FF7171;
			}
		}
		.fot-info {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.cell-box {
		.cell-process{
			.process-li {
				.process-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					.process-sort {
						width: 30rpx;
						height: 30rpx;
						background: #FFE2E8;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF7171;
					}
				}
				.process-time {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
		.cell-label {
			width: 100rpx;
			// font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #333333;
		}
		.cell-val {
			width: calc(100% - 100rpx);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #111111;
		}
	}
	.stoer-tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}
	.product-info {
		.price-txt {
			font-family: MiSans, MiSans;
			font-weight: 600;
			color: #FF7171;
		}
		.txt-del {
			font-family: MiSans, MiSans;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
		.product-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #111111;
		}
		.salce-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	
</style>
<style>
	page {
		background: #F5F5F5;
	}
</style>
